<template>
  <div>
    <div>
      <p class="demo-inner-divider">基本用法</p>
      <e-alert type="success">成功的提示文案</e-alert>
      <e-alert type="error">失败的提示文案</e-alert>
      <e-alert type="warning">警告的提示文案</e-alert>
      <e-alert type="info">帮助/说明的提示文案</e-alert>
    </div>
    <div>
      <p class="demo-inner-divider">可关闭的警告提示</p>
      <e-alert type="success" closable>成功的提示文案</e-alert>
      <e-alert type="error" closable>失败的提示文案</e-alert>
      <e-alert type="warning" closable>警告的提示文案</e-alert>
      <e-alert type="info" closable>帮助/说明的提示文案</e-alert>
    </div>
    <div>
      <p class="demo-inner-divider">含辅助文字介绍及按钮的警告提示</p>
      <e-alert type="success" closable>
        <template v-slot:desc>
          <h4>已成功</h4>
          <p>你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或者拨打客服电话400-400-400。</p>
          <e-button type="drop" style="padding: 0">继续提交</e-button>
        </template>
      </e-alert>
      <e-alert type="error" closable>
        <template v-slot:desc>
          <h4>出错了</h4>
          <p>失败原因。如有问题，请联系审核人员或者拨打客服电话400-400-400。</p>
          <e-button type="drop" style="padding: 0">返回修改</e-button>
        </template>
      </e-alert>
      <e-alert type="warning" closable>
        <template v-slot:desc>
          <h4>请注意</h4>
          <p>失败合约：123213|失败原因：水土不服</p>
          <p>失败合约：123213|失败原因：水土不服</p>
          <e-button type="drop" style="padding: 0">返回修改</e-button>
          <e-button type="drop">继续提交</e-button>
        </template>
      </e-alert>
      <e-alert type="info" closable>
        <template v-slot:desc>
          <h4>帮助提示</h4>
          <p>你所提交的信息已经审核通过，请及时到XXX注册编码。</p>
          <e-button type="drop" style="padding: 0">确定</e-button>
        </template>
      </e-alert>
    </div>
    <alert-md class="markdown-body"></alert-md>
  </div>
</template>

<script>
import alertMd from '../../docs/alert.md';

export default {
  name: 'DemoAlert',
  components: { alertMd },
  data() {
    return {}
  },
  methods: {}
};
</script>

<style lang="less" scoped>
h4 {
  font-size: 14px;
  color: #333;
  font-weight: 400;
}
h4 + p, p + p {
  font-size: 12px;
  color: #999;
}
</style>
